<template>
  <div class="monthly">
    <div class="header flex">
      <div class="selecte-section flex">
        <div class="selecte-wrap flex">
          <img src="@/assets/images/partment.png" alt class="partment-icon" />
          <div class="selecte-title" @click="selectOrg">{{currentOrg}}</div>
          <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
        </div>
        <!-- <Input suffix="ios-search" placeholder="姓名/工号" style="width: auto" class="ml12" /> -->
        <Select
          v-model="employee_name"
          filterable
          remote
          :remote-method="searchByName"
          :loading="loading1"
          @on-change="addSelectName"
          style="width:200px"
          placeholder="姓名"
          clearable
          @on-clear="clearName"
          class="ml12"
        >
          <Option
            v-for="(option, index) in nameOptions"
            :value="option.value"
            :key="index"
          >{{option.label}}</Option>
          <span></span>
        </Select>
      </div>
      <div class="right flex">
        <!-- <Button class="save-btn-green calucate" @click="calucate">核算工资</Button>
        <Button class="pierced calucate ml12">核算工资</Button>-->
        <!-- <Dropdown class="ml12">
          <Button class="more-btn">
            更多操作
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>批量删除员工</DropdownItem>
            <DropdownItem>回收站</DropdownItem>
          </DropdownMenu>
        </Dropdown>-->
      </div>
    </div>

    <div class="header-info mt24">
      <div class="h-info-titel">
        <span class="mr12">2020年4月</span>
        <span class="mr12">测试</span>
      </div>
      <div class="h-info-desc">
        计薪周期：04月01日 - 04月30日
        <Tooltip placement="top">
          <Icon type="ios-help-circle" size="18" class="ml4" />
          <div slot="content" class="tooltip-custom">
            <p>个税所属期：2020年5月。</p>
            <p>即个税申报系统报税时为对应的税款月份，与工资发放的所属月份相同。</p>
          </div>
        </Tooltip>
      </div>
    </div>
    <div class="table-wrap mt12">
      <Table width="100%" :loading="tableloading" :columns="columns1" class="table4" :data="list"></Table>
    </div>

    <!-- modal -->
    <Modal v-model="selectModal" width="720" class="selecte-modal org-modal">
      <p slot="header" style="font-weight:bold;">选择部门</p>
      <div class="m-c-content flex-box">
        <div class="selecte-modal-left">
          <Tabs value="name1" name="tab2">
            <TabPane label="选择部门" tab="tab2" name="name1">
              <div class="tab-content">
                <!-- <Input search placeholder="搜索员工姓名" class="search-inp" /> -->
                <ul class="lately-group">
                  <li class="lately-item flex-box">
                    <label for>
                      <Checkbox @on-change="selectAll" v-model="all">
                        <div class="right-info flex-box">全选</div>
                      </Checkbox>
                    </label>
                  </li>
                  <li class="lately-item flex-box" v-for="(item,index) in orgList" :key="index">
                    <label for>
                      <Checkbox v-model="item.checked" @on-change="orgCheck">
                        <div class="right-info flex-box">
                          <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
                          {{item.organization_name}}
                          <span>（{{item.employee_num}}人）</span>
                        </div>
                      </Checkbox>
                    </label>
                  </li>
                </ul>
              </div>
            </TabPane>
            <TabPane label="最近选择" tab="tab2" name="name2">
              <div class="tab-content-2"></div>
            </TabPane>
          </Tabs>
        </div>
        <div class="selecte-modal-right">
          <div class="s-r-header flex-box" v-if="orgNum">
            <div class="s-r-header-left flex-box">
              <div class="s-r-h-title mr12">已选：</div>
              <div class="s-r-h-detail">
                <span v-if="orgNum">部门{{orgNum}}个</span>
                <Icon
                  type="md-close-circle"
                  class="pointer"
                  size="14"
                  @click="changeAllStatus(false)"
                />
              </div>
            </div>
          </div>
          <div class="s-r-list">
            <div
              class="s-r-l-item"
              v-for="(item,index) in orgList"
              :key="index"
              v-if="item.checked"
            >
              <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
              <div class="s-r-l-item-name">
                <span class="ellipse">{{item.organization_name}}</span>
              </div>
              <div class="close-right-icon">
                <Icon type="md-close" @click="delSelect(index,'org')" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <div class="m-c-footer flex">
          <div class="m-c-left">
            <!-- <span>没有找到想要的项目？ </span>
            <span class="ml12"><a href="">去添加项目</a></span>-->
          </div>
          <div class="m-c-right">
            <Button @click="cancelSelect" class="no-border-btn">取消</Button>
            <Button class="save-btn-green" @click="confirmSelect">确认</Button>
          </div>
        </div>
      </div>
    </Modal>

    <!-- modal -->


      <!-- 快速编辑 -->
    <div class="mask none" :class="{block:rightCardCloseStatus}" @click="closeRightCard"></div>
    <div class="right-cart none" :class="{block:rightCardCloseStatus}">
      <div class="right-cart-top flex">
        <div class="right-cart-title">编辑薪资信息</div>
        <Icon type="md-close" class="right-cart-close" size="24" @click="closeRightCard" />
      </div>
      <div class="right-cart-body">
        <Form :model="formItem" :label-width="140" ref="formValidate" :rules="ruleValidate">
          <div class="form-item-row">
            <FormItem label="姓名">
              <Input v-model="formItem.empolyee_name" disabled placeholder="姓名" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="工号" class="form-item">
              <Input v-model="formItem.work_no" disabled placeholder="工号" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
           <FormItem label="部门" class="form-item">
              <Input v-model="formItem.organization_name" disabled placeholder="部门" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="工号" class="form-item">
              <Input v-model="formItem.input" disabled placeholder="工号" class="form-input"></Input>
            </FormItem>
          </div>
          
          <div class="form-item-row">
            <FormItem label="工时制类型">
              <Input v-model="formItem.working_hour_type" placeholder="工时制类型" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="月计薪时长">
              <Input v-model="formItem.monthly_hours" placeholder="月计薪时长" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="实际计薪时长">
              <Input v-model="formItem.actual_hours" placeholder="实际计薪时长" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="试用期基本工资">
              <Input v-model="formItem.base_salary_probation_eriod" placeholder="月计薪时长" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="试用期岗位工资">
              <Input v-model="formItem.post_salary_probation_eriod" placeholder="试用期岗位工资" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="基本工资">
              <Input v-model="formItem.base_salary" placeholder="基本工资" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="岗位工资">
              <Input v-model="formItem.post_salary" placeholder="岗位工资" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="职务工资">
              <Input v-model="formItem.traffic_salary" placeholder="职务工资" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="业务工资">
              <Input v-model="formItem.kpi_salary" placeholder="业务工资" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="试用期基本工资">
              <Input v-model="formItem.base_salary_probation_eriod" placeholder="试用期基本工资" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="试用期岗位工资">
              <Input v-model="formItem.post_salary_probation_eriod" placeholder="试用期岗位工资" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="试用期职务工资">
              <Input v-model="formItem.city" placeholder="试用期职务工资" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="试用期业务工资">
              <Input v-model="formItem.city" placeholder="试用期业务工资" class="form-input"></Input>
            </FormItem>
          </div><div class="form-item-row">
            <FormItem label="个人社保">
              <Input v-model="formItem.person_social_security" placeholder="个人社保" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="个人公积金">
              <Input v-model="formItem.person_accumulation_fund" placeholder="个人公积金" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="企业社保">
              <Input v-model="formItem.company_social_security" placeholder="企业社保" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="企业公积金">
              <Input v-model="formItem.company_accumulation_fund" placeholder="企业公积金" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="税前补发">
              <Input v-model="formItem.reissue_before_tax" placeholder="税前补发" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="税前补扣">
              <Input v-model="formItem.supplementary_deduction_before_tax" placeholder="月计薪时长" class="form-input"></Input>
            </FormItem>
          </div>

          <div class="form-item-row">
            <FormItem label="税后补发">
              <Input v-model="formItem.after_tax_reissue" placeholder="税后补发" class="form-input"></Input>
            </FormItem>
          </div><div class="form-item-row">
            <FormItem label="迟到扣款">
              <Input v-model="formItem.late_deduction" placeholder="迟到扣款" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="早退扣款">
              <Input v-model="formItem.early_leave_deduction" placeholder="早退扣款" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="缺卡扣款">
              <Input v-model="formItem.deduction_for_missing_card" placeholder="缺卡扣款" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="旷工扣款">
              <Input v-model="formItem.deduction_absenteeism" placeholder="旷工扣款" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="考勤扣款合计">
              <Input v-model="formItem.total_attendance_deduction" placeholder="考勤扣款合计" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="累计专项附加扣除">
              <Input v-model="formItem.accumulated_special_deduction" placeholder="累计专项附加扣除" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="累计应纳税所得额">
              <Input v-model="formItem.accumulated_taxable_income" placeholder="累计应纳税所得额" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="应发工资">
              <Input v-model="formItem.deduction_for_missing_card" placeholder="应发工资" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="应税工资">
              <Input v-model="formItem.city" placeholder="应税工资" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="个人所得税">
              <Input v-model="formItem.tax" placeholder="个人所得税" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="实发工资">
              <Input v-model="formItem.paid_wages" placeholder="实发工资" class="form-input"></Input>
            </FormItem>
          </div>

        </Form>
      </div>
      <div class="right-cart-footer">
        <Button class="cancle-btn-border" @click="closeRightCard">取消</Button>
        <Button type="default" class="save-btn-green ml12" @click="save">保存</Button>
      </div>
    </div>

    <!-- 快速编辑end -->
  </div>
</template>
<script>
import { salary, personnel } from "@/apis";
import http from "@/utils/http";
export default {
  data() {
    return {
      data1: [],

      cancle: "",
      selectModal: false,
      orgList: [],
      orgNum: 0,
      all: false,
      currentOrg: "选择部门",
      employee_name: "", //筛选的name

      tableloading:true,
      columns1: [
        {
          title: "姓名",
          key: "employee_name",
          width: 100,
          fixed:"left"
        },
        {
          title: "工号",
          key: "work_no",
          width: 100
        },
        {
          title: "部门",
          key: "organization_name",
          width: 100
        },
        {
          title: "岗位",
          key: "position",
          width: 100
        },
        {
          title: "工时制类型",
          key: "working_hour_type",
          width: 100
        },
        {
          title: "月计薪时长",
          key: "monthly_hours",
          width: 100
        },
        {
          title: "实际计薪时长",
          key: "actual_hours",
          width: 120
        },
        
        {
          title: "基本工资",
          key: "base_salary",
          width: 100
        },
        {
          title: "岗位工资",
          key: "post_salary",
          width: 100
        },
        {
          title: "职务工资",
          key: "traffic_salary",
          width: 100
        },
        {
          title: "业务工资",
          key: "kpi_salary",
          width: 100
        },
        {
          title: "试用期基本工资",
          key: "base_salary_probation_eriod",
          width: 120
        },
        {
          title: "试用期岗位工资",
          key: "post_salary_probation_eriod",
          width: 120
        },
        {
          title: "试用期职务工资",
          key: "city",
          width: 120
        },
        {
          title: "试用期业务工资",
          key: "city",
          width: 120
        },
        {
          title: "个人社保",
          key: "person_social_security",
          width: 100
        },
        {
          title: "个人公积金",
          key: "person_accumulation_fund",
          width: 100
        },
        {
          title: "企业社保",
          key: "company_social_security",
          width: 100
        },
        {
          title: "企业公积金",
          key: "company_accumulation_fund",
          width: 100
        },
        {
          title: "税前补发",
          key: "reissue_before_tax",
          width: 100
        },
        {
          title: "税前补扣",
          key: "supplementary_deduction_before_tax",
          width: 100
        },
        {
          title: "税后补发",
          key: "after_tax_reissue",
          width: 100
        },
        {
          title: "迟到扣款",
          key: "late_deduction",
          width: 100
        },
        {
          title: "早退扣款",
          key: "early_leave_deduction",
          width: 100
        },
        {
          title: "缺卡扣款",
          key: "deduction_for_missing_card",
          width: 100
        },
        {
          title: "旷工扣款",
          key: "deduction_absenteeism",
          width: 100
        },
        {
          title: "考勤扣款合计",
          key: "total_attendance_deduction",
          width: 140
        },
        {
          title: "累计专项附加扣除",
          key: "accumulated_special_deduction",
          width: 140
        },
        {
          title: "累计应纳税所得额",
          key: "accumulated_taxable_income",
          width: 140
        },
        {
          title: "累计应纳税额",
          key: "accumulated_tax_payable",
          width: 120
        },
        {
          title: "应发工资",
          key: "wages_payable",
          width: 100
        },
        {
          title: "应税工资",
          key: "city",
          width: 100
        },
        {
          title: "个人所得税",
          key: "tax",
          width: 100
        },
        {
          title: "实发工资",
          key: "paid_wages",
          width: 100
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 120,
          render: (h, params) => {
            let _this = this;
            return h("div", [
              h(
                "span",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      _this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
               h(
                "span",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      _this.delete(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      list: [], //当月工资列表
      loading1: false,
      nameOptions: [],
      rightCardCloseStatus:false,
      formItem:{
        name:"",
        id:7,
        base_salary:20000,
      },
      ruleValidate:{},
    };
  },
  methods: {
    calucate() {
      this.$router.push("/payroll/salary/monthly/calucate");
    },
    getList() {
      let organization_id = [];
      this.orgList.forEach(e => {
        if (e.checked) {
          organization_id.push(e.organization_id);
        }
      });

      http
        .get(salary.salarylist, {
          params: {
            organization_id: organization_id.join(","),
            name: this.employee_name || ""
          }
        })
        .then(res => {
          this.tableloading = false;
          if (res.e == "9999") {
            let list = res.data.list.data || [];
            if (list.length) {
              list.forEach(e => {
                if (e.employee_info) {
                  e.employee_name = e.employee_info.name;
                  e.work_no = e.employee_info.work_no;
                  e.position = e.employee_info.position;
                  e.organization_name = e.employee_info.organization_name;
                }
              });
            }
            this.list = res.data.list.data;
          } else {
            this.$Message.error(res.m);
          }
        });
    },
    getOrg() {
      this.$getOrgList().then(res => {
        this.orgList = res.data.list || [];
      });
    },
    ok() {},
    cancel() {},
    confirm() {},
    
    confirmSelect() {
      console.log(2222);
      let orgName = [];
      this.orgList.forEach(e => {
        if (e.checked) {
          orgName.push(e.organization_name);
        }
      });
      this.currentOrg = orgName.join(",") || "选择部门";
      this.selectModal = false;
      console.log(orgName);
      if (orgName.length) {
        this.getList(); //更新列表数据
      }
    },
    cancelSelect() {
      this.selectModal = false;
    },
    orgCheck(e, index) {
      //选择组织
      this.updateOrgNum();
    },
    changeAllStatus(type) {
      //清除或者全选
      this.orgList.forEach(e => {
        e.checked = type;
      });

      // 更新数据
      this.updateOrgNum();
      if (!type) {
        // this.orgNames = "";
        this.all = false;
      }
    },
    selectAll(e) {
      this.all = e;
      this.changeAllStatus(e);
    },
    updateOrgNum() {
      let num = 0;
      this.orgList.forEach(e => {
        if (e.checked) {
          num++;
        }
      });
      if (this.orgList.length == num) {
        this.all = true;
      } else {
        this.all = false;
      }
      this.orgNum = num;
    },
    selectOrg() {
      this.selectModal = true;
    },
    searchByName(query) {
      if (query !== "") {
        this.loading1 = true;
        let _this = this;
        http
          .get(personnel.employeelist, {
            params: {
              name: query
            }
          })
          .then(res => {
            let list = res.data.list.data || [];
            let temp = [];
            list.forEach(e => {
              temp.push({
                value: e.name,
                label: e.name
              });
            });
            _this.loading1 = false;
            _this.nameOptions = temp;
          });
      }
    },
    addSelectName(a, b) {
      this.getList(); //更新筛选列表
    },
    clearName() {
      this.employee_name = "";
      this.getList();
    },


    edit(row){
      console.log(row);
      this.formItem = row;
      this.rightCardCloseStatus = true;
    },
    closeRightCard(){
      this.rightCardCloseStatus = false;
    },
    save(){
      console.log(this.formItem);
      let _this = this;
      http.post(salary.salarycreate,{data:this.formItem}).then(res=>{
        console.log(res);
          if(res.e == "9999"){
            _this.$Message.success('操作成功！');
            _this.rightCardCloseStatus = false;
            _this.getList();
          }
      })
    },
    delete(row){
      let _this = this;
      http.get(salary.salarydelete,{params:{id:row.id}}).then(res=>{
        if(res.e == "9999"){
           _this.$Modal.confirm({
              title: '删除确认',
              content: '确定要删除改员工的当月工资信息吗？',
              onOk: () => {
                  _this.$Message.success('操作成功！');
                  _this.getList();
              },
              onCancel: () => {
                  // this.$Message.info('Clicked cancel');
              }
          });
        }
      })
     
    }
  },
  mounted() {
    this.getList();
    this.getOrg();
  }
};
</script>
<style lang="scss" scoped 


src='./index.scss'>
</style>